<template>
  <div class="counter-warp">
    <!-- <div class="mkd">
      <h1>>>声明</h1>
      <span class="textc">使用本产品不可用于干违法的事情，违法后果自负，建议自首，争取宽大处理</span>
    </div> -->
    <!-- <div class="mkd">
      <h1>>>服务费用</h1>
      <span class="textc">产品完全免费</span>
    </div> -->
    <div class="mkd">
      <h1>>>使用说明</h1>
      <span class="textc" >云消息服务是提高消息处理速度，降低开发成本的服务。开发者无需搭建KAFKA消息队列服务器集群即可调用消息生产接口进行主题（TOPIC）消息生产。消费者可直接根据主题（TOPIC）消费指定信息，操作请看示例。本服务免费使用</span>
    </div>
    <div class="mkd">
      <h1>>>生产接口</h1>
      <div class="titlecls2">
        <h5>版本:</h5>
        <span class="textc">2.0.0v</span>
      </div>
      <div class="titlecls2">
        <h5>请求URL:</h5>
        <span class="clsblue" @click="clickboard('https://www.bblog.site/butt/api/ButtNotice')">https://www.bblog.site/butt/api/ButtNotice</span>
      </div>

      <div class="titlecls2">
        <h5>METHOD：</h5>
        <span class="textc">POST</span>
      </div>

      <div class="titlecls2">
        <h5>CONTENTTYPE：</h5>
        <span class="textc">application/json</span>
      </div>

      <div class="titlecls2">
        <h5>参数：</h5>
        <table>
          <tbody>
            <tr>
                <th>参数名</th>
                <th>类型</th>
                <th>长度</th>
            </tr>
            <tr>
              <td>token</td>
              <td>string</td>
              <td>191</td>
            </tr>
            <tr>
              <td>topicname</td>
              <td>string</td>
              <td>20</td>
            </tr>
            <tr>
              <td>data</td>
              <td>jsonobject</td>
              <td>191</td>
            </tr>
            <tr>
              <td>openid</td>
              <td>string</td>
              <td>191</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="titlecls2">
        <h5>返回：</h5>
        <span class="textc">
          生产成功返回：<br>
          {<br>
            "msg":"SUCCESS",<br>
            "data":"",<br>
            "error_code":0<br>
          }<br>
        </span><br>
        <span class="textc">
          生产失败返回：<br>
          {<br>
            "msg":"该 topic 不存在",<br>
            "data":"",<br>
            "error_code":1<br>
          }<br>
          </span>
      </div>
      <div class="titlecls2">
        <h5>说明：</h5>
        <span class="textc">云消息生产消费相关信息说明请看配置类目</span>
      </div>
    </div>
    <div class="mkd">
      <h1>>>消费接口</h1>
      <div class="titlecls2">
        <h5>地址:</h5>
        <span class="clsblue" @click="clickboard('139.199.233.133:9092')">139.199.233.133:9092</span>
      </div>
      <div class="titlecls2">
        <h5>说明：</h5>
        <span class="textc">云消息消费可参考仓库KAFKA示例，也可自行百度KAFKA消费</span>
      </div>
    </div>
    <div class="mkd">
      <h1>>>配置</h1>
      <span class="textc"></span>
      <div class="titlecls2">
        <h5>OPENID：</h5>
        <span class="textc">OPENID 是强制性配置要求。OPENID获取方式请查看TOKEN页面。</span>
      </div>
      <div class="titlecls2">
        <h5>TOPIC 主题：</h5>
        <span class="textc">TOPIC是消息主题，生产者发送消息至该TOPIC，消费者依据TOPIC分类消费。创建TOPIC需要设置主题名称，分区数（分区数越多，吞吐能力越大。可谷歌kafka分区数，消费组，消费者三者关系），副本数（即备份数）。</span>
      </div>
      <div class="titlecls2">
        <h5>IP 白名单：</h5>
        <span class="textc">IP 白名单中的服务器才能成功生产主题消息。可配置多个IP。示例：122.16.35.79,56.25.111.2</span>
      </div>
      <div class="titlecls2">
        <h5>TOKEN 凭证：</h5>
        <span class="textc">TOKEN 凭证是用户身份的认证，发送主题消息没有携带合法TOKEN或TOPIC不存在将导致生产失败。点击TOKEN页面 “ 获取TOKEN凭证 ”按钮即可查看复制TOKEN</span>
      </div>
    </div>
    <div class="mkd">
      <h1>>>示例</h1>
      <div class="titlecls2">
        <h5>生产示例：</h5>
        <img src="http://qiniuyun.bblog.site/procode.png" class="slimg1" @click="opencode1img"/>
      </div>
      <div class="titlecls2">
        <h5>消费示例：</h5>
        <img src="http://qiniuyun.bblog.site/sumcode.png" class="slimg2" @click="opencode4img"/>
      </div>
    </div>
    <div class="mkd">
      <h1>>>示例代码</h1>
      <!-- <div class="titlecls2">
        <h5>码云仓库地址</h5>
      </div> -->
      <!-- <div class="titlecls2">
        <h5>github：</h5>
        <a class="textc">暂无</a>
      </div> -->
      <div class="titlecls2">
        <h5>码云：</h5>
        <a class="clsblue" @click="clickboard('https://gitee.com/gy_javaweb/produce-test.git')">https://gitee.com/gy_javaweb/produce-test.git</a>
      </div>
    </div>
    <div class="mkd">
      <h1>>>感谢支持</h1>
      <div class="titlecls2">
        <span class="textc">有疑问可添加 qq：<span class="clsblue"  @click="clickboard('861138181')">861138181</span> 交流，也可在码云上issue，多谢star。</span><br><br>
        <span class="textc">备注：项目将持续优化,为用户提供更好的体验。感谢大家的使用和支持</span><br><br>
      </div>
      <div class="mkd">
      <h1>>>捐助小哥哥优化系统</h1>
      <div class="titlecls2">
        <h5></h5>
        <img src="http://qiniuyun.bblog.site/wxsk.jpg" class="slimg3"  @click="openwximg"/>
      </div>
    </div>
    </div>

  </div>
</template>

<script>
export default {
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'API 文档'
    })
  },
  methods: {
    openwximg () {
      wx.previewImage({
        current: 'http://qiniuyun.bblog.site/wxsk.jpg', // 当前显示图片的http链接
        urls: ['http://qiniuyun.bblog.site/wxsk.jpg', 'http://qiniuyun.bblog.site/procode.png', 'http://qiniuyun.bblog.site/sumcode.png'] // 需要预览的图片http链接列表
      })
    },
    opencode1img () {
      wx.previewImage({
        current: 'http://qiniuyun.bblog.site/procode.png.png', // 当前显示图片的http链接
        urls: ['http://qiniuyun.bblog.site/wxsk.jpg', 'http://qiniuyun.bblog.site/procode.png', 'http://qiniuyun.bblog.site/sumcode.png'] // 需要预览的图片http链接列表
      })
    },
    opencode4img () {
      wx.previewImage({
        current: 'http://qiniuyun.bblog.site/sumcode.png', // 当前显示图片的http链接
        urls: ['http://qiniuyun.bblog.site/wxsk.jpg', 'http://qiniuyun.bblog.site/procode.png', 'http://qiniuyun.bblog.site/sumcode.png'] // 需要预览的图片http链接列表
      })
    },
    clickboard (needata) {
      var that = this
      wx.setClipboardData({
        data: needata,
        success (res) {
          wx.getClipboardData({
            success (res) {
              wx.hideToast()
              wx.showToast({
                title: '复制成功',
                icon: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
table{
  table-layout: fixed;
  width: 100%;
}
thead, tbody{
  text-align:center;
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
tr{
  text-align:center;
  width: 100%;
  float: left;
  border-bottom: 1px solid gainsboro;
  border-top: 1px solid gainsboro;
}
td, th{
  text-align:center;
  /* word-wrap: break-word; */
  width: 32.5%;
  float: left;
  border-right: 1px solid gainsboro;
  border-left: 1px solid gainsboro;
}
button{
  margin: 150px auto;
}
.clsblue{
  color: blue;
  font-size: 15px;
  width: 100%;
  text-decoration: underline;
}
.slimg1{
  width: 100%;display: block;
  height: 90px;
}
.slimg2{
  width: 100%;display: block;
  height: 300px;
}
.slimg3{
  width: 100%;display: block;
  height: 400px;
}
.mkd{

  width: 100%;
  float: left;
  margin-top: 20px;
}

.textc{
  font-size: 15px;
  color: rgba(48, 48, 47, 0.705);
  width: 100%;
}
.titlecls1{
  width: 100%;
  margin: 10px 10px 10px 10px;
}
.titlecls2{
  font-size: 15px;
  width: 80%;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0px solid red;
}
.titlecls3{
  font-size: 15px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0px solid red;
}
h5{
  font-weight: bold;
}
h1{
  font-weight: bold;
}

</style>
